<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <!-- 用户数据卡片 -->
      <el-col :span="8">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>用户统计</span>
              <el-tag type="success">实时</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="data-item">
              <div class="label">总用户数</div>
              <div class="value">{{ userStats.totalUser }}</div>
            </div>
            <div class="data-item">
              <div class="label">今日新增</div>
              <div class="value">{{ userStats.newUsersToday }}</div>
            </div>
            <div class="data-item">
              <div class="label">活跃用户</div>
              <div class="value">{{ userStats.activeUsers }}</div>
            </div>
            <el-divider>用户分布</el-divider>
            <div class="chart-container">
              <pie-chart :data="userDistributionData" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 课程数据卡片 -->
      <el-col :span="8">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>课程统计</span>
              <el-tag type="warning">实时</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="data-item">
              <div class="label">总课程数</div>
              <div class="value">{{ courseStats.totalCourses }}</div>
            </div>
            <div class="data-item">
              <div class="label">已发布课程</div>
              <div class="value">{{ courseStats.publishedCourses }}</div>
            </div>
            <div class="data-item">
              <div class="label">未发布课程</div>
              <div class="value">{{ courseStats.unpublishedCourses }}</div>
            </div>
            <el-divider>课程分类分布</el-divider>
            <div class="chart-container">
              <bar-chart :data="courseDistributionData" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 订单数据卡片 -->
      <el-col :span="8">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>订单统计</span>
              <el-tag type="primary">实时</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="data-item">
              <div class="label">总订单数</div>
              <div class="value">{{ orderStats.totalOrders }}</div>
            </div>
            <div class="data-item">
              <div class="label">今日订单</div>
              <div class="value">{{ orderStats.todayOrders }}</div>
            </div>
            <div class="data-item">
              <div class="label">总收入</div>
              <div class="value">¥{{ orderStats.totalIncome }}</div>
            </div>
            <el-divider>订单状态分布</el-divider>
            <div class="chart-container">
              <pie-chart :data="orderStatusData" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 趋势图表 -->
    <el-row :gutter="20" class="trend-charts">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>数据趋势</span>
              <el-radio-group v-model="trendPeriod" size="small">
                <el-radio-button label="7">近7天</el-radio-button>
                <el-radio-button label="30">近30天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="trends-container">
            <line-chart :data="trendsData" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import PieChart from '@/components/charts/PieChart.vue'
import BarChart from '@/components/charts/BarChart.vue'
import LineChart from '@/components/charts/LineChart.vue'

export default {
  name: 'DashboardView',
  components: {
    PieChart,
    BarChart,
    LineChart
  },
  setup() {
    // 数据状态
    const userStats = ref({})
    const courseStats = ref({})
    const orderStats = ref({})
    const trendsData = ref({})
    const trendPeriod = ref('7')
    const loading = ref(false)

    // 获取用户统计数据
    const fetchUserStats = async () => {
      try {
        const response = await request({
          url: '/userService/userController/getUserBoard',
          method: 'get'
        })
        userStats.value = response
      } catch (error) {
        ElMessage.error('获取用户统计数据失败')
      }
    }

    // 获取课程统计数据
    const fetchCourseStats = async () => {
      try {
        const response = await request({
          url: '/courseService/courseController/getCourseBoard',
          method: 'get'
        })
        courseStats.value = response.data
      } catch (error) {
        ElMessage.error('获取课程统计数据失败')
      }
    }

    // 获取订单统计数据
    const fetchOrderStats = async () => {
      try {
        const response = await request({
          url: '/ordersService/ordersController/getOrdersBoard',
          method: 'get'
        })
        orderStats.value = response.data
      } catch (error) {
        ElMessage.error('获取订单统计数据失败')
      }
    }

    // 获取趋势数据
    const fetchTrendsData = async () => {
      try {
        const response = await request({
          url: '/ordersService/ordersController/getTrendBoard',
          method: 'get'
        })
        trendsData.value = response.data.trends
      } catch (error) {
        ElMessage.error('获取趋势数据失败')
      }
    }

    // 计算用户分布数据
    const userDistributionData = computed(() => {
      if (!userStats.value) return []
      return [
        { name: '学生', value: userStats.value.students },
        { name: '教师', value: userStats.value.teachers },
        { name: '管理员', value: userStats.value.admins }
      ]
    })

    // 计算课程分类分布数据
    const courseDistributionData = computed(() => {
      if (!courseStats.value) return []
      return [
        { name: '分类一', value: courseStats.value.categoryOneCourses },
        { name: '分类二', value: courseStats.value.categoryTwoCourses },
        { name: '分类三', value: courseStats.value.categoryThreeCourses },
        { name: '分类四', value: courseStats.value.categoryFourCourses },
        { name: '分类五', value: courseStats.value.categoryFiveCourses },
        { name: '分类六', value: courseStats.value.categorySixCourses },
        { name: '分类七', value: courseStats.value.categorySevenCourses },
        { name: '分类八', value: courseStats.value.categoryEightCourses },
        { name: '分类九', value: courseStats.value.categoryNineCourses }
      ]
    })

    // 计算订单状态分布数据
    const orderStatusData = computed(() => {
      if (!orderStats.value) return []
      return [
        { name: '待支付', value: orderStats.value.waitPay },
        { name: '支付成功', value: orderStats.value.paySuccess },
        { name: '已取消', value: orderStats.value.cancelOrders }
      ]
    })

    // 监听趋势时间段变化
    watch(trendPeriod, () => {
      fetchTrendsData()
    })

    // 初始化数据
    onMounted(() => {
      fetchUserStats()
      fetchCourseStats()
      fetchOrderStats()
      fetchTrendsData()

      // 设置定时刷新
      const timer = setInterval(() => {
        fetchUserStats()
        fetchCourseStats()
        fetchOrderStats()
      }, 300000) // 每5分钟刷新一次

      // 组件卸载时清除定时器
      onUnmounted(() => {
        clearInterval(timer)
      })
    })

    return {
      userStats,
      courseStats,
      orderStats,
      trendsData,
      trendPeriod,
      loading,
      userDistributionData,
      courseDistributionData,
      orderStatusData
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.data-card {
  margin-bottom: 20px;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 10px 0;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.label {
  color: #606266;
  font-size: 14px;
}

.value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.chart-container {
  height: 300px;
  margin-top: 20px;
}

.trends-container {
  height: 400px;
}

.el-divider {
  margin: 20px 0;
}

:deep(.el-card__header) {
  padding: 15px 20px;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 